<template lang="html">
	<div class="my-box">
		<MineHeader title='我的课程'/>
		<!-- <ul class="tab">
			<li @click='tabClick(0)'>课程表</li>
			<li @click='tabClick(1)'>已完成</li>
		</ul> -->
		<Tabs :value='value' @change='changeValues'>
			<Tab label='课程表' index='1' class='iconfont icon-kechengbiao'>
				<ul>
					<li v-for='(item,index) in list' :key='index'>
						<p>
							<h3>{{ item.title }}</h3>
							<span>{{ item.suit }}</span>
						</p>
					</li>
				</ul>
			</Tab>
			<Tab label='已完成' index='2' class='iconfont icon-ai34'>
				<span>tab2</span>
			</Tab>
		</Tabs>
	</div>
</template>
<script>
	import MineHeader from '../../components/mine/mineheader.vue'

	export default{
		name:'mysubject',
		data(){
			return{
				value:'1',
				list:[]
			}
		},
		components:{
			MineHeader
		},
		methods:{
			changeValues(value){
				this.value = value;
			}
		},
		mounted(){
			this.$axios.get(this.HOST + '/details')
			.then(data =>{
				this.list = data.data.data
				console.log(this.list)
			})
			.catch(error =>{
				console.log(error)
			})
		}
}
</script>
<style lang="less" scoped>
	.my-box{
		width:100%;
		.tab{
			width: 100%;
			text-align:center;
			li{
				width: 50%;
				height:50px;
				line-height: 50px;
				float: left;
			}
		}
	}
</style>